<template>
  <div>
    <!-- 蓝色添加按钮 -->
    <el-button
      type="primary"
      style="
        float: left;
        margin-top: 20px;
        margin-right: 10px;
        margin-left: 10px;
      "
      @click="dialogFormVisible = true"
      >添加用户</el-button
    >

    <!-- --------------------------------------------------------------------- -->
    <!-- 用户编号,用户名,用户角色,用户状态,操作表格 -->
    <el-table
      :data="userlist"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
    >
      <!-- 用户编号 -->
      <el-table-column prop="id" label="用户编号" sortable width="180">
      </el-table-column>
      <!-- 用户名 -->
      <el-table-column prop="username" label="用户名" sortable width="180">
      </el-table-column>
      <!-- 用户角色 -->
      <el-table-column prop="role" label="用户角色" sortable width="180">
      </el-table-column>
      <!-- 用户状态 -->
      <el-table-column prop="status" label="用户状态" sortable width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            plain
            :type="scope.row.status == 1 ? 'success' : 'primary'"
            >{{ scope.row.status == 1 ? "启用" : "禁用" }}</el-button
          >
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 点击添加用户出现弹出框内包含表单,表单有管理员角色是下拉菜单,管理员名称,管理员密码,管理员状态 -->
    <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="form" label-width="120px">
        <el-form-item label="管理员角色" prop="role">
          <el-select v-model="form.roleid" placeholder="请选择">
            <el-option label="超级管理员" value="1"></el-option>
            <el-option label="普通管理员" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="管理员名称" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="管理员密码" prop="password">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="管理员状态" prop="status">
          <el-switch
            v-model="form.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          >
            ></el-switch
          >
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 点击编辑出现的弹框 -->
    <el-dialog title="编辑用户" :visible.sync="dialogFormVisible2">
      <el-form :model="form2" ref="form2" label-width="120px">
        <el-form-item label="管理员角色" prop="role">
          <el-select v-model="form2.roleid" placeholder="请选择">
            <el-option label="超级管理员" value="1"></el-option>
            <el-option label="普通管理员" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="管理员名称" prop="username">
          <el-input v-model="form2.username"></el-input>
        </el-form-item>
        <el-form-item label="管理员密码" prop="password">
          <el-input v-model="form2.password"></el-input>
        </el-form-item>
        <el-form-item label="管理员状态" prop="status">
          <el-switch
            v-model="form2.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          >
            ></el-switch
          >
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="submitForm2()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 完整功能的分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="userpage.page"
      :page-sizes="[1, 5, 10, 15]"
      :page-size="userpage.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //长度
      total: 0,
      //管理员列表数据
      userlist: [],
      //分页请求数据
      userpage: {
        //当前页码
        page: 1,
        //每页显示的条数
        size: 1,
      },
      //添加表单数据
      form: {
        roleid: 1,
        username: "",
        password: "",
        status: 1,
      },
      //编辑表单数据
      form2: {
        roleid: 1,
        username: "",
        password: "",
        status: 1,
      },
      //点击关闭添加弹出框
      dialogFormVisible: false,
      //点击编辑弹出框
      dialogFormVisible2: false,
    };
  },
  methods: {
    //添加用户
    submitForm() {
      // console.log(this.form);
      this.$api.reqAddUser(this.form).then((res) => {
        // console.log(res);
      });
    },
    // 编辑并回填
    handleEdit(index, row) {
      // console.log(index, row);
      this.dialogFormVisible2 = true;
      this.form2 =JSON.parse(JSON.stringify(row));
    },
    // 编辑提交
    submitForm2() {
      // console.log(this.form2);
      this.$api.reqEditUser(this.form2).then((res) => {
        // console.log(res);
      });
      // 刷新页面
      this.$router.go(0);
    },
    // 删除,提示是否删除,并刷新页面
    handleDelete(index, row) {
      // console.log(index, row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.reqRemoveUser({id:row.id}).then((res) => {
            console.log(res);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 每页多少条
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.userpage.size = val;
      this.fn();
    },
    // 当前的页码
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.userpage.page = val;
      this.fn();
    },
    fn(){
      this.$api.reqGetUser(this.userpage).then((res) => {
      this.userlist = res.data.list;
      // console.log("管理员列表数据", this.userlist);
    });
    }
  },

  created() {},
  mounted() {
    //请求管理员列表数据(总数)
    this.$api.reqGetUserCount().then((res) => {
      console.log(res);
      this.total = res.data.list[0].total;
    });
    this.fn();

  },
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang='scss' scoped>
</style>
